<template>
	<div>
		<div class="x-head">
			<div class="x-label">期数(整数):</div>
			<XhInput
				class="xh-input"
				:value="periods"
				:item="{ formType: 'number' }"
				:disabled="item.disabled"
				@value-change="handlePeriodsChange"
			/>
		</div>
		<el-table
			:data="dataValue"
			:max-height="370"
			stripe
			size="mini"
			border
			style="width: 100%"
			class="x-smoll-table"
			fit
		>
			<el-table-column width="80" label="期数">
				<template slot-scope="scope">{{
					value.length > 1 ? scope.$index + 1 + '期' : '趸缴'
				}}</template>
			</el-table-column>
			<el-table-column
				v-for="(field, index) in fields"
				:key="field.prop"
				:prop="field.prop"
				:width="field.width"
			>
				<template slot="header" slot-scope="scope">
					<div class="x-smoll-table__lb-i" :class="getHeaderClass(field)">
						{{ field.name }}
					</div>
				</template>
				<template slot-scope="scope">
					<!-- 最后一行不可编辑(文字显示) -->
					<template v-if="isText(scope, field)">
						{{ scope.row[field.prop] }}
					</template>
					<component
						v-else
						:is="field.comp"
						:disabled="item.disabled"
						:item="field"
						:value="scope.row[field.prop]"
						@value-change="handleValueChange(scope.$index, arguments)"
					/>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import { XhDateTime, XhInput, XhSelect } from './index.js'
import arrayMixin from './arrayMixin'
export default {
	name: 'xh-install',
	mixins: [arrayMixin],
	components: { XhDateTime, XhInput, XhSelect },
	inject: ['XhForm'],
	watch: {
		value: {
			handler(val) {
				this.dataValue = JSON.parse(JSON.stringify(val))
				this.periods = val.length
			},
			immediate: true
		},
		'item.allMoney'(val) {
			this.formateRowData()
		}
	},
	props: {},
	mounted() {
		this.XhForm.crmRules[this.item.key] ??= []
		this.XhForm.crmRules[this.item.key].push({
			validator: this.validate
		})
	},
	data() {
		return {
			periods: '',
			fields: [
				{
					isNull: 1,
					name: '缴交百分比(数字)',
					prop: 'proportion',
					comp: 'XhInput',
					formType: 'number', // XhInput内部要用
					width: 150
				},
				{
					isNull: 1,
					name: '缴交日期',
					prop: 'returnDate',
					comp: 'XhDateTime',
					width: 220
				},
				{
					name: '缴交金额',
					prop: 'money'
				}
			]
		}
	},
	methods: {
		handlePeriodsChange(data) {
			this.periods = data.value || 0
			let difference = data.value - this.dataValue.length
			if (difference > 0) {
				for (let diff = 0; diff < difference; diff++) {
					let baseRow = this.fields.reduce((row, field) => {
						row[field.prop] = ''
						return row
					}, {})
					this.dataValue.push(baseRow)
				}
				this.formateRowData()
				this.valueChange(this.dataValue)
			}
			if (difference < 0) {
				this.dataValue.splice(difference, Math.abs(difference))
				this.formateRowData()
				this.valueChange(this.dataValue)
			}
		},
		handleValueChange(rowIndex, args) {
			let { item, value } = args[0]
			let row = this.dataValue[rowIndex]
			if (item.prop == 'proportion') {
				row[item.prop] = Math.ceil(value * 100) / 100
			} else {
				row[item.prop] = value
			}
			this.formateRowData()
			this.valueChange(this.dataValue)
		},
		// 设置缴交金额字段和最后一行数据(不可编辑)的值
		formateRowData() {
			if (this.dataValue.length) {
				const withoutLast = this.dataValue.slice(0, this.dataValue.length - 1)
				// 设置缴交金额字段
				for (let index = 0; index < withoutLast.length; index++) {
					let rowData = this.dataValue[index]
					if (rowData.proportion) {
						let money = this.item.allMoney * (rowData.proportion / 100)
						rowData.money = Math.round(money * 100) / 100
					} else {
						rowData.money = 0
					}
				}
				// 设置最后一行数据
				let lastRow = this.dataValue[this.dataValue.length - 1]
				lastRow.proportion =
					100 * 100 -
					withoutLast.reduce(
						(count, { proportion }) =>
							proportion ? count + Math.round(100 * proportion) : count,
						0
					)
				lastRow.money =
					this.item.allMoney * 100 -
					withoutLast.reduce(
						(count, { money }) => (money ? count + money * 100 : count),
						0
					)
				lastRow.proportion = lastRow.proportion / 100
				lastRow.money = lastRow.money / 100
			}
		},
		isText(scope, field) {
			return (
				!field.comp ||
				(scope.$index + 1 == this.dataValue.length &&
					field.prop == 'proportion')
			)
		},
		getHeaderClass(field) {
			let required = true
			if (!field.isNull) {
				required = false
			} else if (this.dataValue.length == 0) {
				required = this.item.data.isNull
			}
			return { required }
		},
		validate(rule, value, callback) {
			let pass = true,
				message = ''
			this.dataValue.forEach((row) => {
				this.fields.forEach(({ prop, isNull, name }) => {
					if (isNull == 1 && row[prop] == '') {
						pass = false
						message = '请输入' + name
					}
					if (row.proportion < 0) {
						pass = false
						message = '缴费比例需大于0%'
					}
				})
			})
			if (!pass) {
				callback(new Error(message))
				return
			}
			callback()
		}
	}
}
</script>

<style lang="scss" scoped>
$color: #909399;
$require: #f56c6c;
.x-head {
	display: flex;
	align-items: center;
	padding: 3px 7px;
	border: 1px solid #e6e6e6;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-width: 0;
}
.x-label {
	font-size: 12px;
	padding: 0 3px;
	color: $color;
	white-space: nowrap;
}
.x-smoll-table__lb-i {
	position: relative;
	font-size: 12px;
	color: $color;
	&.required {
		padding-left: 8px;
		&::before {
			content: '*';
			color: $require;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}
::v-deep {
	.x-smoll-table {
		.el-table__header th {
			padding: 0;
		}
		.el-table__body td {
			padding: 5px 0;
		}
		.el-input__inner,
		.el-input__inner:focus,
		.el-textarea__inner,
		.el-textarea__inner:focus {
			border-color: #ddd !important;
		}
	}
	.xh-input .el-input__inner {
		border-color: #e6e6e6 !important;
	}
}
</style>
